<template>
  <div class="class-fication">
    <nav-bar style="width:100%;"
             :leftShow="false"
             title="分类"></nav-bar>
    <!-- 搜索 -->
    <van-search v-model="searchKey"
                shape="round"
                input-align="center"
                background="transparent"
                placeholder="请输入搜索关键词" />
    <van-tree-select :items="items"
                     @click-nav="navClick"
                     :main-active-index.sync="active">
      <template #content>
        <van-grid :column-num="3"
                  icon-size="1.2rem"
                  :border="false">
          <van-grid-item v-for="value in 6"
                         :key="value"
                         @click="itemClick"
                         :icon="require('@/assets/image/default_img.png')"
                         text="文字" />
        </van-grid>
      </template>
    </van-tree-select>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar'
import preventBack from '@/mixins/preventBack'
export default {
  data () {
    return {
      searchKey: '',
      active: 0,
      items: [{ text: '蔬菜' }, { text: '水果' }, { text: '蔬菜' }, { text: '蔬菜' }, { text: '蔬菜' }, { text: '蔬菜' }, { text: '蔬菜' }, { text: '蔬菜' }, { text: '蔬菜' }, { text: '蔬菜' }, { text: '蔬菜' }, { text: '蔬菜' },],
    };
  },
  components: {
    NavBar
  },
  mixins: [preventBack],
  created () { },
  methods: {
    /**
     * @description: 左侧导航栏点击
     * @param {*} index 被点击的导航的索引
     * @return {*}
     */
    navClick (index) {
      console.log(index);
    },
    itemClick (...args) {
      console.log(args);
    }
  }
}

</script>
<style lang='scss' scoped>
.class-fication {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .van-search {
    width: 80%;
    .van-search__content {
      border: 1px solid #eeeeee;
      background: #ffffff;
    }
  }
  .van-tree-select {
    width: 100%;
    flex: 1;
    .van-tree-select__nav {
      flex: 0.6;
      .van-sidebar-item {
        height: 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .van-sidebar-item--select {
        background-color: #ffffff;
        ::v-deep .van-sidebar-item__text {
          padding: 0.15rem 0.3rem;
          color: #ffffff;
          background: linear-gradient(to right, #ff6128, #ff8331);
          border-radius: 0.5rem;
        }
      }
      .van-sidebar-item--select::before {
        height: 0;
      }
    }
    ::v-deep .van-grid-item__content {
      padding: 0.16rem;
    }
  }
}
</style>